<template>
    <lay-container class="container">
        <lay-table v-model:selectedKeys="checkList" :height="getHeight()" :columns="columns4" :data-source="tableList">
            <template #checkbox="{ row }">
                <lay-input v-model="row.checkbox" />
            </template>
            <template #bookImg="{ row }">
                <img :src="row.bookImg.split(',')[0]" style="width: 80px; height: 100px;" />
            </template>
            <template #bookName="{ row }">
                {{ row.bookName }}
            </template>
            <template #author="{ row }">
                {{ row.author }}
            </template>
            <template #publisher="{ row }">
                {{ row.publisher }}
            </template>
            <template #price="{ row }">
                {{ row.price }}
            </template>
            <template #publicationDate="{ row }">
                {{ row.publicationDate }}
            </template>
            <template #isbncode="{ row }">
                {{ row.isbncode }}
            </template>
            <template v-slot:toolbar>
                <lay-form v-model="searchParam">
                    <lay-form-item mode="inline">
                        <lay-input v-model="searchParam.bookName" placeholder="请输入图书名称"></lay-input>
                    </lay-form-item>
                    <lay-form-item mode="inline">
                        <lay-button type="primary" @click="searchBtn()">
                            <lay-icon type="layui-icon-search"></lay-icon>搜索
                        </lay-button>
                        <lay-button class="btn" border="red" @click="resetBtn()">
                            <lay-icon type="layui-icon-refresh-one"></lay-icon>重置
                        </lay-button>
                        <lay-button type="normal" @click="addBtn()">
                            <lay-icon type="layui-icon-addition"></lay-icon>新增
                        </lay-button>
                    </lay-form-item>
                </lay-form>
            </template>
            <template v-slot:operator="scope">
                <lay-button size="xs" type="primary" @click="editBtn(scope.row)">
                    <lay-icon type="layui-icon-edit"></lay-icon>编辑
                </lay-button>
                <lay-button size="xs" type="danger" @click="deleteBtn(scope.row)">
                    <lay-icon type="layui-icon-delete"></lay-icon>删除
                </lay-button>
                <lay-button size="xs" type="warm" @click="bookInfoBtn(scope.row)">
                    <lay-icon type="layui-icon-tips"></lay-icon>查看
                </lay-button>
            </template>
            <template v-slot:footer>
                <div class="parent-container">
                    <div class="button-container">
                        <lay-button class="btn" size="sm" type="danger" @click="batchDeleteBtn(checkList)">
                            <lay-icon type="layui-icon-delete" size="24px"></lay-icon>批量删除
                        </lay-button>
                    </div>
                    <div class="page-container">
                        <!-- 分页 -->
                        <lay-page v-model="searchParam.currentPage" :layout="layout"
                            v-model:limit="searchParam.pageSize" :limits="[5, 10, 15, 20]" :pages="page"
                            :total="searchParam.total" @change="pageChange"></lay-page>
                    </div>
                </div>
            </template>
        </lay-table>
    </lay-container>
    <!--新增弹框-->
    <AddBook ref="addBookRef" @on-fresh="getList"></AddBook>
    <!--图书信息-->
    <BookInfo ref="bookInfoRef"></BookInfo>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AddBook from './AddBook.vue';
import BookInfo from './BookInfo.vue';
import useBook from '@/composable/book/useBook.ts'
import useBookTable from '@/composable/book/useBookTable.ts'
const { searchParam, getList, searchBtn, resetBtn, tableHeight, tableList, pageChange, checkList } = useBookTable()
const { addBookRef, bookInfoRef, bookInfoBtn, addBtn, editBtn, deleteBtn, batchDeleteBtn } = useBook(getList)
const layout = ref(['count', 'prev', 'page', 'next', 'limits', 'refresh', 'skip'] as any)
const page = ref(5)
const height = ref(0)
const getHeight = () => {
    height.value = tableHeight.value
    return height.value + 'px'
}

const columns4 = [
    { title: "选项", width: "55px", type: "checkbox", fixed: "left" },
    { title: "编号", width: "80px", key: "id", fixed: "left", hide: true },
    { title: "图书图片", width: "120px", key: "bookImg", customSlot: "bookImg" },
    { title: "图书名称", width: "80px", key: "bookName", customSlot: "bookName" },
    { title: "作者姓名", width: "120px", key: "author", customSlot: "author" },
    { title: "出版社名称", width: "80px", key: "publisher", customSlot: "publisher" },
    { title: "图书价格", width: "80px", key: "price", customSlot: "price" },
    { title: "出版时间", width: "120px", key: "publicationDate", customSlot: "publicationDate" },
    { title: "ISBN码", width: "120px", key: "isbncode", customSlot: "isbncode" },
    { title: "操作", width: "200px", customSlot: "operator", key: "operator", fixed: "right", ignoreExport: true }
]
</script>
<style scoped>
.container {
    margin-top: 10px;
    margin-bottom: 10px;
}

button {
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #03045e;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease-in;
    z-index: 1;
}

button::before,
button::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    transform: skew(15deg);
    transition: all 0.5s;
    overflow: hidden;
    z-index: -1;
}

button::before {
    left: -3px;
    background: #240046;
}

button::after {
    right: -3px;
    background: #5a189a;
}

button:hover::before,
button:hover::after {
    width: 58%;
}

button:hover span {
    color: #e0aaff;
    transition: 0.3s;
}

button span {
    color: #03045e;
    font-size: 18px;
    transition: all 0.3s ease-in;
}

.parent-container {
    /*网格布局 */
    display: grid;
    /* 创建两列，第一列自动调整大小，第二列占剩余空间 */
    grid-template-columns: auto 1fr;
    /* 网格项在网格区域的开始位置 */
    justify-items: start;
    /* 网格项在交叉轴的中心位置 */
    align-items: center;
    /* 网格项之间的间隙 */
    gap: 5px;
}

.button-container {
    /* 按钮容器在网格区域的开始位置 */
    justify-self: start;
}

.page-container {
    /* 分页容器在网格区域的结束位置 */
    justify-self: end;
}
</style>